<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-form-item label="租户类型" prop="typeCode">
        <el-select v-model="queryParams.typeCode" placeholder="请选择" style="width: 240px">
          <el-option value="all" label="全部"></el-option>
          <el-option value="0" label="工厂"></el-option>
          <el-option value="2" label="物流"></el-option>
          <el-option value="1" label="商家"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="租户名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入租户名称" clearable style="width: 240px" />
      </el-form-item>
      <el-form-item label="租户状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择" style="width: 240px">
          <el-option value="all" label="全部"></el-option>
          <el-option value="0" label="禁用"></el-option>
          <el-option value="1" label="启用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="截至" prop="endTime">
        <el-input
          v-model="queryParams.endTime"
          type="text"
          @input="v => (queryParams.endTime = v.replace(/[^\d]/g, ''))"
          placeholder="请输入"
          clearable
          style="width: 240px"
        />
        <span style="margin-left: 20px">天内到期</span>
      </el-form-item>
      <el-form-item label="商家等级" prop="businessLevelId">
        <el-select v-model="queryParams.businessLevelId" placeholder="请选择" clearable style="width: 240px">
          <el-option
            v-for="item in businessLevelIdOption"
            :key="item.businessLevelId"
            :value="item.businessLevelId"
            :label="item.businessLevelName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="init">搜索</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handelAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="list"
      @sort-change="sortCutoff"
      :default-sort="{ prop: 'createTime', order: 'descending' }"
    >
      <el-table-column label="序号" align="center" prop="ordinal" />
      <el-table-column label="租户名称" align="center" key="name" prop="name">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="租户类型" align="center" prop="type" :show-overflow-tooltip="true" />
      <el-table-column label="商家等级" align="center" prop="businessLevelName">
        <template #default="scope">
          <div>{{ scope.row.businessLevelName ? scope.row.businessLevelName : "--" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="服务截至日期" align="center" prop="cutoff" width="240">
        <template #default="scope">
          {{ scope.row.cutoff ? formatDate(scope.row.cutoff, "YY-MM-DD") : "--" }}
        </template>
      </el-table-column>
      <el-table-column label="账号数量" prop="userNumber" align="center" />
      <el-table-column label="创建人" prop="createBy" align="center" width="180" />
      <el-table-column label="创建日期" sortable="custom" align="center" width="180" prop="createTime">
        <template #default="scope">{{ scope.row.createTime ? formatDate(scope.row.createTime, "YY-MM-DD") : "--" }}</template>
      </el-table-column>
      <el-table-column label="禁用/启用" align="center" prop="expireTime" width="180">
        <template #default="scope"
          ><el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @click="editStatus(scope.row)"
        /></template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handelAdd(scope.row)"> 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="listTotal" v-model:page="queryParams.current" v-model:limit="queryParams.size" @pagination="init" />
    <!-- 添加或修改租户对话框 -->
    <el-drawer
      :title="isNew ? '新增租户' : '编辑租户'"
      v-model="drawerVisible"
      @close="closeDeawer"
      size="600px"
      class="drawer"
      append-to-body
    >
      <el-container style="height: 100%">
        <el-aside class="drawer-aside">
          <el-tabs v-model="drawerTabs" tab-position="left" class="demo-tabs">
            <el-tab-pane label="基础信息" :name="1"></el-tab-pane>
            <el-tab-pane label="开通续费信息" :name="2"></el-tab-pane>
            <el-tab-pane v-if="tenantForm.typeCode == 0 || tenantForm.typeCode == 1" label="开拓渠道" :name="3"></el-tab-pane>
            <el-tab-pane v-if="tenantForm.typeCode == 0" label="保证金设置" :name="4"></el-tab-pane>
            <el-tab-pane label="租户标识" :name="5"></el-tab-pane>
            <el-tab-pane
              v-if="tenantForm.typeCode == 1 && tenantForm.channel.businessType == 2"
              label="所属代理商"
              :name="6"
            ></el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-main>
          <div class="spase">
            <div class="left" v-show="drawerTabs == 1">
              <el-scrollbar>
                <div class="title">基础信息</div>
                <el-form ref="tenantFormRef" label-position="top" :model="tenantForm" :rules="tenantrRules" label-width="80px">
                  <el-form-item label="租户名称" prop="name">
                    <el-input v-model="tenantForm.name" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="租户类型" prop="typeCode">
                    <el-select
                      v-model="tenantForm.typeCode"
                      @change="getDict"
                      :disabled="tenantForm.tenantId"
                      placeholder="请选择"
                    >
                      <el-option v-for="item in type" :key="item.name" :value="item.key" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="租户别名（用于终端商家查看显示的工厂名称）" prop="anotherName" v-if="tenantForm.typeCode==='0'">
                    <el-input v-model="tenantForm.anotherName" placeholder="请输入" />
                  </el-form-item>
                  <el-form-item label="客户细类" prop="customers">
                    <el-select v-model="tenantForm.customers" multiple placeholder="请选择">
                      <el-option v-for="item in dictList" :key="item.dictCode" :value="item.dictLabel">
                        {{ item.dictLabel }}
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="公司区域" prop="area">
                    <el-cascader
                      v-model="tenantForm.area"
                      style="flex: 1"
                      :options="area"
                      :props="{ label: 'name', value: 'id' }"
                      placeholder="请选择"
                      @change="areaChange"
                    />
                  </el-form-item>
                  <el-form-item label="详细地址" prop="location">
                    <el-input v-model="tenantForm.location" placeholder="请输入" maxlength="20" />
                  </el-form-item> -->
                  <el-form-item label="营业执照编码" prop="socialCodeId">
                    <el-input v-model="tenantForm.socialCodeId" placeholder="请输入营业执照编码" />
                  </el-form-item>
                  <el-form-item label="公司地址" prop="area" class="newAddress">
                    <el-cascader
                      v-model="tenantForm.area"
                      :options="area"
                      :props="{ label: 'name', value: 'id' }"
                      placeholder="请选择公司区域"
                      @change="areaChange"
                    />
                    <el-select
                      v-model="tenantForm.poiName"
                      style="flex: 1"
                      :props="{ label: 'name', value: 'id' }"
                      :placeholder="tenantForm.area ? '请选择公司地址' : '请先选择公司区域'"
                      filterable
                      remote
                      :remote-method="remoteMethod"
                    >
                      <el-option v-for="item in poiOptions" :key="item.location" :label="item.name" :value="item.name" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="地址补充说明" prop="location">
                    <el-input v-model="tenantForm.location" placeholder="门牌号等补充说明" maxlength="11" />
                  </el-form-item>
                  <el-form-item label="联系电话" prop="mobile">
                    <el-input v-model="tenantForm.mobile" placeholder="请输入" maxlength="11" />
                  </el-form-item>
                  <el-form-item label="商家类型" prop="channel.businessType" v-if="tenantForm.typeCode == '1'">
                    <el-select v-model="tenantForm.channel.businessType" placeholder="请选择">
                      <el-option :value="1" label="普通商家"></el-option>
                      <el-option :value="2" label="加盟商"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="商家等级" prop="businessLevelId" v-if="tenantForm.typeCode == '1'">
                    <el-select v-model="tenantForm.businessLevelId" placeholder="请选择">
                      <el-option
                        v-for="item in businessLevelIdOption"
                        :key="item.businessLevelId"
                        :value="item.businessLevelId"
                        :label="item.businessLevelName"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="是否自有展厅" prop="mobile" v-if="tenantForm.typeCode == '1'">
                    <el-radio-group v-model="tenantForm.hasSelfExhibitionHall">
                      <el-radio :value="true">是</el-radio>
                      <el-radio :value="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="生产产品类别" prop="productionList" v-if="tenantForm.typeCode == '0'">
                    <div style="flex: 1">
                      <el-cascader
                        style="width: 100%; height: auto"
                        :options="options"
                        :props="{ label: 'name', value: 'categoryId', multiple: true }"
                        v-model="tenantForm.productionList"
                        :show-all-levels="false"
                        clearable
                        filterable
                        @change="productionChange"
                      />
                      <div class="classify-list" v-if="tenantForm.productionList?.length">
                        <div class="classify-item" v-for="item in tenantForm.productionList" :key="item">
                          {{ getcategoryName(item[item.length - 1]) }}
                          <el-radio-group v-model="categoryMakeType[item[item.length - 1]]">
                            <el-radio :value="1">自生产</el-radio>
                            <el-radio :value="0">非自生产</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                  <!-- 收款计划 -->
                  <div class="plan-wrap" v-if="tenantForm.typeCode === '0'">
                    <header class="jzt-flex-center">
                      <div class="title">收款关联节点</div>
                      <el-button class="f12" type="primary" link @click="addFKNode">
                        <el-icon class="mr8"><CirclePlusFilled /></el-icon>新增付款节点
                      </el-button>
                    </header>

                    <div class="list mb18">
                      <div class="list-item mb10" v-for="(item, index) in planList" :key="index">
                        <header>
                          <p>{{ index + 1 + "期款项" }}</p>
                          <img src="@/assets/images/del.png" alt="" width="14px" @click="delNode(item, index)" />
                        </header>
                        <div class="options-warp">
                          <div>
                            <p class="label"><i style="color: #f53f3f">*</i><span>商家付款节点</span></p>
                            <el-select
                              v-model="item.businessNode"
                              :style="{ width: '100%' }"
                              placeholder="请选择"
                              size="small"
                              @change="getNodeList(item, index, $event, 1)"
                            >
                              <el-option
                                v-for="(_item, index) in item.businessNodeList"
                                :key="index"
                                :label="_item.dictLabel"
                                :value="_item.dictValue"
                              >
                              </el-option>
                            </el-select>
                            <el-input-number
                              class="jzt-input-number jzt-input-number-hidden suffix"
                              v-model="item.collectionScale"
                              :min="0"
                              :max="100"
                              :style="{ width: '100%', paddingLeft: '2px' }"
                              placeholder="商家付款比例"
                              controls-position="right"
                              allow-clear
                              size="small"
                            >
                            </el-input-number>
                          </div>
                          <div>
                            <div class="mb6">
                              <p class="label">供应商收款节点</p>
                              <el-select
                                v-model="item.collectionNode"
                                :style="{ width: '100%' }"
                                placeholder="请选择"
                                size="small"
                                @change="changeCollectionNode(item, index)"
                              >
                                <el-option
                                  v-for="(_item, index) in item.collectionNodeList"
                                  :key="index"
                                  :label="_item.dictLabel"
                                  :value="_item.dictValue"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <div>
                              <p class="label">平台支付时效</p>
                              <el-input-number
                                class="jzt-input-number jzt-input-number-hidden suffix-day"
                                v-model="item.collectionCycle"
                                :min="0"
                                :max="365"
                                :style="{ width: '100%' }"
                                placeholder="请输入"
                                controls-position="right"
                                allow-clear
                                size="small"
                              >
                              </el-input-number>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="margin-bottom: 20px; font-weight: bold">管理员账号</div>
                  <el-form-item label="登录账号" prop="account">
                    <el-input v-model="tenantForm.account" placeholder="请输入" :disabled="tenantForm.tenantId" />
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="tenantForm.password" placeholder="请输入" />
                  </el-form-item>
                </el-form>
              </el-scrollbar>
            </div>
            <div class="right" v-if="drawerTabs == 2">
              <div class="title">
                开通续费信息 <el-button type="primary" size="small" @click="dialogVisible = true">续费</el-button>
              </div>
              <div class="content">
                <img v-if="!renewList?.length" src="../../../assets/images/empty.png" alt="" />
                <div v-else class="record-item" v-for="item in renewList">
                  <div class="date">
                    <el-icon> <BellFilled /> </el-icon>{{ item.createTime ? formatDate(item.createTime, "YY-MM-DD") : "--" }}
                  </div>
                  <div class="info-grid">
                    <div>
                      续费月数
                      <div>{{ item.sginMonth }}</div>
                    </div>
                    <div>
                      服务截止日期
                      <div>{{ item.cutoffTime?.split(" ")[0] }}</div>
                    </div>
                    <div>
                      续费金额
                      <div>{{ item.amount }}</div>
                    </div>
                    <div>
                      账号
                      <div>{{ tenantForm.account }}</div>
                    </div>
                    <div>
                      续费方式
                      <div>{{ mode[item.mode] }}</div>
                    </div>
                    <div>
                      操作人
                      <div>{{ item.createBy }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-show="drawerTabs == 3" style="width: 100%">
              <div class="title">
                开拓渠道
                <el-radio-group v-model="channel.isChannelDevBusiness" v-if="tenantForm.typeCode == 1">
                  <el-radio :value="true" @click.prevent="isChannelDevBusinessChanne(true)">非渠道开拓</el-radio>
                </el-radio-group>
                <el-radio-group v-model="channel.isPersonDevFactory" v-if="tenantForm.typeCode == 0">
                  <el-radio :value="true" @click.prevent="isPersonDevFactoryChanne(true)">非渠道开拓</el-radio>
                </el-radio-group>
              </div>
              <!-- 租户类型tenantForm.typeCode 1-商家，0-工厂 -->
              <el-form
                ref="channelFormRef"
                label-position="top"
                :model="channel"
                :rules="channel?.isChannelDevBusiness || channel?.isPersonDevFactory ? {} : channelRules"
                label-width="80px"
              >
                <template v-if="tenantForm.typeCode == 1">
                  <el-form-item label="关联渠道" prop="channelTenantId">
                    <el-select-v2
                      v-model="channel.channelTenantId"
                      filterable
                      remote
                      :remote-method="channelRemoteMethod"
                      :options="channelOptions"
                      :props="channelProps"
                      :loading="selectLoading"
                      placeholder="请选择"
                      :disabled="channel.isChannelDevBusiness"
                    />
                  </el-form-item>
                  <el-form-item label="营销返佣截止时间" prop="channelCutOff">
                    <el-date-picker
                      v-model="channel.channelCutOff"
                      type="date"
                      placeholder="请选择"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      :disabled-date="disabledDate"
                      :disabled="channel.isChannelDevBusiness"
                    />
                  </el-form-item>
                </template>
                <template v-if="tenantForm.typeCode == 0">
                  <el-form-item label="关联开拓人员" prop="introducerTenantId">
                    <el-select-v2
                      v-model="channel.introducerTenantId"
                      filterable
                      remote
                      :remote-method="introducerRemoteMethod"
                      :options="channelOptions"
                      :props="introducerProps"
                      :loading="selectLoading"
                      placeholder="请选择"
                      :disabled="channel.isPersonDevFactory"
                    />
                  </el-form-item>

                  <el-form-item label="开拓人员营销返佣截止时间" prop="introducerCutOff">
                    <el-date-picker
                      v-model="channel.introducerCutOff"
                      type="date"
                      placeholder="请选择"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      :disabled-date="disabledDate"
                      :disabled="channel.isPersonDevFactory"
                    />
                  </el-form-item>
                </template>
              </el-form>
            </div>
            <div v-show="drawerTabs == 4" style="width: 100%">
              <div class="title">保证金设置</div>
              <el-form
                ref="earnestMoneyFormRef"
                label-position="top"
                :model="channel"
                :rules="earnestMoneyRules"
                label-width="80px"
              >
                <el-form-item label="保证金金额" prop="factoryDepositAmount">
                  <el-input-number
                    class="hidden-controls"
                    v-model="channel.factoryDepositAmount"
                    :precision="0"
                    :step="1"
                    :min="0"
                  />
                </el-form-item>
                <el-form-item label="单次充值比例" prop="factoryDepositRechargeRatio">
                  <el-input-number
                    class="hidden-controls"
                    v-model="channel.factoryDepositRechargeRatio"
                    :precision="0"
                    :step="1"
                    :min="0"
                    :max="100"
                  />%
                </el-form-item>
              </el-form>
            </div>
            <div v-show="drawerTabs == 5" class="tenant-identification">
              <el-checkbox-group v-model="tenantMarkList">
                <el-checkbox :value="item.value" v-for="item in dbo_tenant_mark" :key="item.value">
                  <span>{{ item.label }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-show="drawerTabs == 6" style="width: 100%">
              <el-form
                ref="agentTenantFormRef"
                label-position="top"
                :model="agentTenantForm"
                :rules="agentTenantRules"
                label-width="80px"
              >
                <el-form-item label="所属代理商" prop="agentTenantId">
                  <el-select-v2
                    v-model="agentTenantForm.agentTenantId"
                    filterable
                    remote
                    :remote-method="agentTenantIdRemoteMethod"
                    :options="agentTenantOptions"
                    :props="agentTenantProps"
                    :loading="agentTenanSelectLoading"
                    placeholder="请选择"
                  />
                </el-form-item>
                <el-form-item label="所属业务员">
                  <el-select-v2
                    v-model="agentTenantForm.agentSalesmanUserId"
                    filterable
                    remote
                    :remote-method="agentSalesmanUserRemoteMethod"
                    :options="agentSalesmanUserOptions"
                    :props="agentSalesmanUserProps"
                    :loading="agentSalesmanUserSelectLoading"
                    placeholder="请选择代理商的业务人员（非必填）"
                    :disabled="!agentTenantForm.agentTenantId"
                    clearable
                  />
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-main>
      </el-container>
      <el-dialog v-model="dialogVisible" width="380" title="续费" class="tenant-dialog" @close="closeRenewal">
        <el-form ref="renewalRef" label-position="top" :model="renewalForm" :rules="renewalRules">
          <el-form-item label="续费月数" prop="sginMonth">
            <el-input-number style="flex: 1" controls-position="right" :min="1" :max="10000" v-model="renewalForm.sginMonth" />
          </el-form-item>
          <el-form-item label="续费金额" prop="amount">
            <el-input-number style="flex: 1" controls-position="right" :min="1" :max="100000" v-model="renewalForm.amount" />
          </el-form-item>
          <el-form-item label="使用人数" prop="userNumber">
            <el-input-number style="flex: 1" controls-position="right" :min="1" :max="1000" v-model="renewalForm.userNumber" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="toRenewal"> 确定 </el-button>
          </div>
        </template>
      </el-dialog>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="btn" :loading="buttonLoading" type="primary" @click="handelSubmit(tenantFormRef)">确 定</el-button>
          <el-button class="btn" @click="drawerVisible = false">取 消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";

import { getDicts } from "@/api/system/dict/data";

import {
  add,
  renewal,
  detail,
  getList,
  getArea,
  disable,
  selectList,
  channelSelectList,
  supplyChainSelectList,
  regionSearch,
  agencyManageList,
  agentUserList
} from "@/api/tenant";
import { getCategoryTree } from "@/api/products/manage";

import { edit } from "../../../api/tenant";

import { formatDate } from "xijs";

import { selectBusinessAllNode, selectAllNode, selectNode } from "@/api/system/payment";
import { ElNotification, ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const { dbo_tenant_mark } = proxy.useDict("dbo_tenant_mark");

const mode = {
  0: "线下",
  1: "支付宝",
  2: "微信",
  3: "网银"
};
const isNew = ref(true); // 抽屉内容是否为新增抽屉
// 表格数据查询参数
const queryParams = ref({
  current: 1,
  size: 10,
  typeCode: "",
  name: "",
  status: "",
  endTime: null,
  businessLevelId: "",
  orderBy: "0"
});
// 商家等级选项
const businessLevelIdOption = ref([]);
// 角色细分列表
const dictList = ref([]);
// 租户总数
const listTotal = ref(0);
// 租户列表
const list = ref([]);

const loading = ref(false);
const categoryMakeType = ref({});
// 添加、修改用户弹窗
const dialogVisible = ref(false);
const drawerVisible = ref(false);
const buttonLoading = ref(false);
// 租户查询表单
const tenantForm = ref({
  customers: "",
  name: "",
  area: "",
  account: "",
  password: "",
  location: "",
  mobile: "",
  type: "",
  channel: {
    businessType: ""
  }
});
const cityCode = ref("");
const poiOptions = ref([]);
const options = ref([]);
// 续费表单
const renewalForm = ref({
  sginMonth: "",
  amount: "",
  userNumber: "",
  tenantId: ""
});
const area = ref([]); // 省市区选项
const renewList = ref([]); //续费列表
const type = [
  { name: "工厂", key: "0" },
  { name: "商家", key: "1" },
  { name: "物流", key: "2" }
];
const nodeList = ref([]);
const collectionPlan = ref({}); //编辑时的收款计划数据obj
const planList = ref([]);
const allNode = ref({});
const currFactoryId = ref("");

/**
 * 返回所有可选的收款节点
 */
const selectAllNodeFun = factoryIds => {
  selectBusinessAllNode({ factoryIdList: factoryIds }).then(res => {
    if (res.code === 200) {
      nodeList.value = res.data;
    }
  });

  selectAllNode({ factoryIdList: factoryIds }).then(res => {
    if (res.code === 200) {
      allNode.value = res.data;
    }
  });
};

/**
 * 新增付款节点
 */
const addFKNode = () => {
  if (planList.value === undefined) {
    planList.value = [];
  }
  //检查当前页面上的计划是否全部否已选择了商家付款节点
  const businessNodeIsEmpty = planList.value?.some(obj => !obj.businessNode || !obj.collectionNode);
  if (businessNodeIsEmpty) {
    return ElMessage({
      message: "请完善当前计划的商家付款节点、供应商收款节点",
      type: "error"
    });
  }
  if (planList.value.length === 0) {
    planList.value.push({
      collectionType: null, //收款类型;使用1,2,3,4来代替几期   n期款项
      businessNode: null, //商家付款节点 1 接单付款 2 生产完成确认 3 已发货 4 入库完成 5 配送完成 6 安装完成
      businessNodeList: nodeList.value, //商家付款节点list
      collectionNode: null, //供应商收款节点 1 接单付款 2 生产完成确认 3 已发货 4 入库完成 5 配送完成 6 安装完成
      collectionNodeList: [], //供应商收款节点list
      collectionScale: null, //收款比例
      collectionCycle: null //转账时间设置
    });
  } else {
    const preNode = planList.value[planList.value.length - 1];
    planList.value.push({
      collectionType: null, //收款类型;使用1,2,3,4来代替几期   n期款项
      businessNode: null, //商家付款节点 1 接单付款 2 生产完成确认 3 已发货 4 入库完成 5 配送完成 6 安装完成
      businessNodeList: nodeList.value.filter(item => Number(item.dictValue) >= Number(preNode.businessNode)), //商家付款节点list
      collectionNode: null, //供应商收款节点 1 接单付款 2 生产完成确认 3 已发货 4 入库完成 5 配送完成 6 安装完成
      collectionNodeList: [], //供应商收款节点list
      collectionScale: null, //收款比例
      collectionCycle: null //转账时间设置
    });
  }
};

/**
 * 删除付款节点
 */
const delNode = (row, rowIndex) => {
  planList.value.splice(rowIndex, 1);
};

const getViewNodelist = businessNode => {
  return nodeList.value.filter(item => Number(item.dictValue) >= Number(businessNode));
};

const changeCollectionNode = (row, rowIndex) => {
  if (rowIndex !== 0) {
    if (Number(row.collectionNode) < Number(planList.value[rowIndex - 1].collectionNode)) {
      ElMessage({
        message: "当前节点配置错误，请重新选择",
        type: "error"
      });
      row.collectionNode = "";
    }
  }
};

/**
 *选择商家付款节点之后，获取供应商可用的收款节点
 * @param row 当前收款计划行
 * @param type 当前下拉框的类型 1：商家下拉 2：供应商下拉
 * @param selectVal 下拉框选择的节点值
 */
const getNodeList = (row, index, selectVal, type) => {
  if (type === 1) {
    row.collectionNode = null;

    //删除当前节点后面的所有数据
    planList.value.splice(index + 1);

    //如果存在上一个节点，请求接口，获取当当前行的供应商节点的下拉列表
    const lastNodeValue = index === 0 ? "" : planList.value[index - 1].collectionNode;
    selectNode({ type: 1, selectId: row.businessNode, lastNodeValue: lastNodeValue, factoryIdList: [currFactoryId.value] }).then(
      res => {
        if (res.code === 200) {
          planList.value[index].collectionNodeList = res.data;
        }
      }
    );
  }
};

// 初始化列表
const init = () => {
  const typeCode = queryParams.value.typeCode == "all" ? null : queryParams.value.typeCode;
  const status = queryParams.value.status == "all" ? null : queryParams.value.status;
  getList({ ...queryParams.value, typeCode, status }).then(res => {
    list.value = res.data.list.map((v, index) => ({
      ...v,
      ordinal: queryParams.value.size * (queryParams.value.current - 1) + index + 1
    }));
    listTotal.value = res.data.total;
  });
};

/**
 * 根据id查找名字
 */
const getcategoryName = id => {
  let name = "";
  const getName = (tree, id) => {
    for (let index = 0; index < tree.length; index++) {
      if (tree[index].children && tree[index].children.length) {
        getName(tree[index].children, id);
      } else {
        if (tree[index].categoryId == id) {
          name = tree[index].name;
        }
      }
    }
  };
  getName(options.value, id);
  return name;
};
// 切换租户类型查询客户细分
const getDict = value => {
  tenantForm.value.customers = [];
  let key;
  if (value === "0") {
    key = "factory_customer";
  } else if (value === "1") {
    key = "terminal_customer";
  } else if (value === "2") {
    key = "physical_customer";
  }
  getDicts(key).then(res => {
    dictList.value = res.data;
  });
  channel.value = {};
  channelOptions.value = [];
};
// 截至日期排序
const sortCutoff = data => {
  queryParams.value.orderBy = data.order == "ascending" ? "1" : "0";
  init();
};
const closeDeawer = () => {
  proxy.$refs.tenantFormRef?.resetFields();
  planList.value = [];
  tenantMarkList.value = [];
};
const areaDetail = ref();
const getAreaStr = idArr => {
  return area.value
    .filter(v => idArr[0] == v.id)[0]
    .children.filter(v => idArr[1] == v.id)[0]
    .children.filter(v => idArr[2] == v.id)[0].sname;
};
// 改变地址
const areaChange = value => {
  poiOptions.value = [];
  cityCode.value = value[0];
  areaDetail.value = {
    area: getAreaStr(value),
    areaId: value[2]
  };
};
// 关闭续费弹窗
const closeRenewal = () => {
  proxy.$refs.renewalRef?.resetFields();
  dialogVisible.value = false;
};

const drawerTabs = ref(1);
const tenantFormRef = ref();
// 校验
const tenantrRules = {
  name: [{ required: true, message: "租户名称不能为空", trigger: "blur" }],
  anotherName: [{ required: true, message: "租户别名不能为空", trigger: "blur" }],
  typeCode: [{ required: true, message: "租户类型不能为空", trigger: "change" }],
  customers: [{ required: true, message: "客户细类不能为空", trigger: "blur" }],
  socialCodeId: [{ required: true, message: "请输入营业执照编码", trigger: "blur" }],
  area: [{ required: true, message: "公司区域不能为空", trigger: "change" }],
  location: [{ required: true, message: "详细地址不能为空", trigger: "blur" }],
  mobile: [
    { required: true, message: "联系电话不能为空", trigger: "blur" },
    { min: 11, max: 11, message: "联系电话只能是11位", trigger: "blur" }
  ],
  account: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
  ],
  productionList: [{ required: true, message: "生产产品类别不能为空", trigger: "change" }],
  businessLevelId: [{ required: true, message: "商家等级不能为空", trigger: "change" }],
  "channel.businessType": [{ required: true, message: "请选择商家类型", trigger: "change" }]
};

// 开拓渠道表单数据、 保证金设置
const channel = ref({});
const channelRules = {
  channelTenantId: [{ required: true, message: "请选择关联渠道", trigger: "change" }],
  channelCutOff: [{ required: true, message: "请选择营销池返佣截止时间", trigger: "change" }],
  introducerTenantId: [{ required: true, message: "请选择关联开拓人员", trigger: "change" }],
  introducerCutOff: [{ required: true, message: "请选择开拓人员营销返佣截止时间", trigger: "change" }]
};

const channelFormRef = ref();
const channelOptions = ref([]);
const channelProps = {
  label: "title",
  value: "channelTenantId"
};
const introducerProps = {
  label: "title",
  value: "introducerTenantId"
};
const selectLoading = ref(false);
//远程搜索
const remoteMethod = e => {
  if (cityCode.value == "") {
    ElMessage({
      message: "请先选择公司区域",
      type: "error"
    });
  }
  if (e !== "" && cityCode.value !== "") {
    let obj = {
      keywords: e || "",
      types: " ",
      region: cityCode.value,
      cityLimit: true
    };
    regionSearch(obj).then(res => {
      if (res.code == 200) {
        poiOptions.value = res.data;
      }
    });
  }
};
// 商家开拓渠道-下拉列表查询
const channelRemoteMethod = query => {
  if (query !== "") {
    selectLoading.value = true;
    channelSelectList({ key: query }).then(res => {
      selectLoading.value = false;
      channelOptions.value = res.data;
    });
  }
};

// 工厂开拓渠道-下拉列表查询
const introducerRemoteMethod = query => {
  if (query !== "") {
    selectLoading.value = true;
    supplyChainSelectList({ key: query }).then(res => {
      selectLoading.value = false;
      channelOptions.value = res.data;
    });
  }
};

// 商家-非渠道开拓变化
const isChannelDevBusinessChanne = e => {
  e === channel.value.isChannelDevBusiness
    ? (channel.value.isChannelDevBusiness = false)
    : (channel.value.isChannelDevBusiness = e);
  // 选中
  if (channel.value.isChannelDevBusiness) {
    channel.value.channelTenantId = "";
    channel.value.channelCutOff = "";
    channelOptions.value = [];
    channelFormRef.value.clearValidate();
  }
};

// 工厂-非渠道开拓变化
const isPersonDevFactoryChanne = e => {
  e === channel.value.isPersonDevFactory ? (channel.value.isPersonDevFactory = false) : (channel.value.isPersonDevFactory = e);
  // 选中
  if (channel.value.isPersonDevFactory) {
    channel.value.introducerTenantId = "";
    channel.value.introducerCutOff = "";
    channelOptions.value = [];
    channelFormRef.value.clearValidate();
  }
};

const earnestMoneyRules = {
  factoryDepositAmount: [{ required: true, message: "请输入保证金金额", trigger: "blur" }],
  factoryDepositRechargeRatio: [{ required: true, message: "请输入单次充值比例", trigger: "blur" }]
};
const earnestMoneyFormRef = ref();

// 所属代理商表单数据
const agentTenantForm = ref({});
const agentTenantRules = {
  agentTenantId: [{ required: true, message: "请选择所属代理商", trigger: "change" }]
};

const agentTenantFormRef = ref();
// 所属代理商-下拉列表查询
const agentTenantOptions = ref([]);
const agentTenantProps = {
  label: "agentTenantName",
  value: "agentTenantId"
};
const agentTenanSelectLoading = ref(false);
const agentTenantIdRemoteMethod = query => {
  if (query && tenantForm.value.channel.businessType == 2) {
    agentTenanSelectLoading.value = true;
    agencyManageList({ key: query }).then(res => {
      agentTenanSelectLoading.value = false;
      agentTenantOptions.value = res.data;
    });
  }
};
// 所属代理商-下拉列表查询
const agentSalesmanUserOptions = ref([]);
const agentSalesmanUserProps = {
  label: "nickName",
  value: "userId"
};
const agentSalesmanUserSelectLoading = ref(false);
const agentSalesmanUserRemoteMethod = query => {
  if (query && tenantForm.value.channel.businessType == 2) {
    agentSalesmanUserSelectLoading.value = true;
    agentUserList({ agentTenantId: agentTenantForm.value.agentTenantId, key: query }).then(res => {
      agentSalesmanUserSelectLoading.value = false;
      agentSalesmanUserOptions.value = res.data;
    });
  }
};

// 续费弹窗校验
const renewalRules = {
  sginMonth: [{ required: true, message: "月数不能为空", trigger: "blur" }],
  amount: [{ required: true, message: "续费金额不能为空", trigger: "blur" }],
  userNumber: [{ required: true, message: "使用人数不能为空", trigger: "blur" }]
};
/**
 * 递归补充父级id
 */
const getParentId = (tree, id) => {
  let arr = [];
  const getIds = (tree, id) => {
    for (let index = 0; index < tree.length; index++) {
      if (id == tree[index].categoryId) {
        if (tree[index].fomart.split("-").length) arr = tree[index].fomart.split("-");
      } else if (tree[index].children && tree[index].children.length > 0) {
        getIds(tree[index].children, id);
      }
    }
  };
  getIds(tree, id);
  return arr;
};
// 获取编辑详情
const getRenewalList = () => {
  detail(renewalForm.value.tenantId).then(res => {
    // 此处续费信息赋值
    renewList.value = res.data.renewList;
    const customers = res.data.customers?.map(v => v.typeName);
    let areaId = {};
    const getAreaId = tree => {
      tree.forEach(v => {
        if (v.children) {
          getAreaId(v.children);
        } else {
          if (v.id == res.data.areaId) {
            areaId = v;
          }
        }
      });
    };
    getAreaId(area.value);
    areaId = areaId.ancestors?.split(",").map(v => Number(v));
    if (res.data.productionList) {
      res.data.productionList.forEach(v => {
        categoryMakeType.value[v.categoryId] = v.makeType;
      });
    }
    const productionList = res.data.productionList?.map(v => {
      return getParentId(options.value, v.categoryId);
    });
    tenantForm.value = { ...res.data, customers, area: areaId, productionList };

    //收款计划回显
    collectionPlan.value = res.data.collectionPlan;
    planList.value = res.data.collectionPlan?.detailList?.map((item, index) => {
      return {
        ...item,
        businessNodeList:
          index === 0 ? nodeList.value : getViewNodelist(collectionPlan.value?.detailList[index - 1].businessNode),
        collectionNodeList: allNode.value[Number(item.businessNode)]
      };
    });
    channel.value = res.data.channel || {};
    if (res.data.channel) {
      tenantForm.value.hasSelfExhibitionHall = res.data.channel.hasSelfExhibitionHall;
      if (res.data.typeCode == 1) {
        channel.value.isChannelDevBusiness = res.data.channel.isChannelDevBusiness ? false : true;
        if (!channel.value.isChannelDevBusiness && channel.value.channelTenantId) {
          channelOptions.value = [
            {
              channelTenantId: channel.value.channelTenantId,
              title: channel.value.channelTenantName
            }
          ];
        }
      } else if (res.data.typeCode == 0) {
        channel.value.isPersonDevFactory = res.data.channel.isPersonDevFactory ? false : true;
        if (!channel.value.isPersonDevFactory && channel.value.introducerTenantId) {
          channelOptions.value = [
            {
              introducerTenantId: channel.value.introducerTenantId,
              title: channel.value.introducerTenantName
            }
          ];
        }
      }
      // 所属代理商相关信息回显
      agentTenantForm.value = {
        agentTenantId: res.data.channel.agentTenantId,
        agentTenantName: res.data.channel.agentTenantName,
        agentSalesmanUserId: res.data.channel.agentSalesmanUserId,
        agentSalesmanNickName: res.data.channel.agentSalesmanNickName
      };
      tenantForm.value.channel.businessType = res.data.channel.businessType;
      agentTenantIdRemoteMethod(res.data.channel.agentTenantName);
      agentSalesmanUserRemoteMethod(res.data.channel.agentSalesmanNickName);
    }
  });
};
/**
 * 类别变更
 */
const productionChange = value => {
  for (let i = 0; i < value.length; i++) {
    if (!categoryMakeType.value[value[i][value[i].length - 1]]) categoryMakeType.value[value[i][value[i].length - 1]] = 0;
  }
};
// 打开抽屉
const handelAdd = item => {
  tenantForm.value = {
    channel: {}
  };
  renewList.value = [];
  if (item.tenantId) {
    renewList.value = [];
    renewalForm.value.tenantId = item.tenantId;
    tenantMarkList.value = item.tenantMark ? JSON.parse(item.tenantMark) : [];
    isNew.value = false;
    getRenewalList();
    getDict(item.typeCode);
  } else {
    isNew.value = true;
  }

  drawerTabs.value = 1;

  drawerVisible.value = true;
  buttonLoading.value = false;

  currFactoryId.value = item.tenantId;
  selectAllNodeFun(item.tenantId ? [item.tenantId] : []);
};
// 新增or修改
const handelSubmit = async () => {
  proxy.$refs.tenantFormRef.validate((valid, value) => {
    console.log(tenantForm.value);
    if (valid) {
    }
  });
  let isSubmit = true;
  await tenantFormRef.value.validate((valid, fields) => {
    if (!valid) {
      isSubmit = false;
      ElMessage.error("请完善基础信息");
      return;
    }
  });

  // 租户类型tenantForm.typeCode 1-商家，0-工厂
  if (tenantForm.value.typeCode == 0 || tenantForm.value.typeCode == 1) {
    await channelFormRef.value.validate((valid, fields) => {
      if (!valid) {
        isSubmit = false;
        ElMessage.error("请完善开拓渠道信息");
        return;
      }
    });
    if (tenantForm.value.typeCode == 0) {
      await earnestMoneyFormRef.value.validate((valid, fields) => {
        if (!valid) {
          isSubmit = false;
          ElMessage.error("请完善保证金设置");
          return;
        }
      });
    }
  }

  // 商家类型为加盟商
  if (tenantForm.value.channel.businessType == 2) {
    await agentTenantFormRef.value.validate((valid, fields) => {
      if (!valid) {
        isSubmit = false;
        ElMessage.error("请完善所属代理商信息");
        return;
      }
    });
  }
  if (!isSubmit) return;
  const poiindex = poiOptions.value.findIndex(v => {
    return v.name === tenantForm.value.poiName;
  });
  if (poiindex !== -1) {
    tenantForm.value.poiLongitude = poiOptions.value[poiindex].location.split(",")[0];
    tenantForm.value.poiLatitude = poiOptions.value[poiindex].location.split(",")[1];
  }
  tenantForm.value.areaAncestors = tenantForm.value.area.join(",");
  const customers = tenantForm.value.customers.map(v => ({ typeName: v }));
  const type = tenantForm.value.typeCode == "0" ? "工厂" : tenantForm.value.typeCode == "1" ? "商家" : "物流";
  if (!areaDetail.value?.area) {
    areaChange(tenantForm.value.area);
  }
  const checkPlanRes = checkPlanList(); //检查收费管理节点信息是否完善
  console.log("检查收款计划的结果===", checkPlanRes);
  if (!checkPlanRes.flag) {
    return;
  }

  let channelData = { ...channel.value, ...{ businessType: tenantForm.value.channel.businessType }, ...agentTenantForm.value };
  channelData.hasSelfExhibitionHall = tenantForm.value.hasSelfExhibitionHall;

  if (tenantForm.value.typeCode == 1) {
    channelData.isChannelDevBusiness = channel.value.isChannelDevBusiness ? false : true;
    channelData.isPersonDevFactory = false;
  } else if (tenantForm.value.typeCode == 0) {
    channelData.isPersonDevFactory = channel.value.isPersonDevFactory ? false : true;
    channelData.isChannelDevBusiness = false;
  }
  if (!checkPlanRes.flag) {
    return;
  }

  if (isNew.value) {
    const productionList = tenantForm.value.productionList
      ? tenantForm.value.productionList.map((v, i) => ({
          categoryId: v[v.length - 1],
          makeType: categoryMakeType.value[v[v.length - 1]]
        }))
      : undefined;
    add({
      ...tenantForm.value,
      customers,
      ...areaDetail.value,
      type,
      renewList: renewList.value,
      productionList,
      collectionPlan: { detailList: tenantForm.value.typeCode === "0" ? checkPlanRes.planList : [] }, //收款计划
      channel: channelData,
      tenantMark: JSON.stringify(tenantMarkList.value)
    }).then(res => {
      init();
      proxy.$modal.msgSuccess("操作成功！");
      drawerVisible.value = false;
    });
  } else {
    tenantForm.value.ordinal = undefined;
    const productionList = tenantForm.value.productionList
      ? tenantForm.value.productionList.map((v, i) => ({
          categoryId: v[v.length - 1],
          makeType: categoryMakeType.value[v[v.length - 1]]
        }))
      : undefined;
    edit({
      ...tenantForm.value,
      ...areaDetail.value,
      customers,
      type,
      productionList,
      collectionPlan: {
        ...collectionPlan.value,
        detailList: tenantForm.value.typeCode === "0" ? checkPlanRes.planList : []
      },
      channel: channelData,
      tenantMark: JSON.stringify(tenantMarkList.value)
    }).then(() => {
      init();
      proxy.$modal.msgSuccess("操作成功！");
      drawerVisible.value = false;
    });
  }
  return;
  // proxy.$refs.tenantFormRef.validate((valid, value) => {
  //   console.log(tenantForm.value);
  //   if (valid) {
  //     const customers = tenantForm.value.customers.map(v => ({ typeName: v }));
  //     const type = tenantForm.value.typeCode == "0" ? "工厂" : tenantForm.value.typeCode == "1" ? "商家" : "物流";
  //     if (!areaDetail.value?.area) {
  //       areaChange(tenantForm.value.area);
  //     }

  //     if (isNew.value) {
  //       const productionList = tenantForm.value.productionList
  //         ? tenantForm.value.productionList.map((v, i) => ({
  //             categoryId: v[v.length - 1],
  //             makeType: categoryMakeType.value[v[v.length - 1]]
  //           }))
  //         : undefined;
  //       add({ ...tenantForm.value, customers, ...areaDetail.value, type, renewList: renewList.value, productionList }).then(
  //         res => {
  //           init();
  //           proxy.$modal.msgSuccess("操作成功！");
  //           drawerVisible.value = false;
  //         }
  //       );
  //     } else {
  //       tenantForm.value.ordinal = undefined;
  //       const productionList = tenantForm.value.productionList
  //         ? tenantForm.value.productionList.map((v, i) => ({
  //             categoryId: v[v.length - 1],
  //             makeType: categoryMakeType.value[v[v.length - 1]]
  //           }))
  //         : undefined;
  //       edit({ ...tenantForm.value, ...areaDetail.value, customers, type, productionList }).then(() => {
  //         init();
  //         proxy.$modal.msgSuccess("操作成功！");
  //         drawerVisible.value = false;
  //       });
  //     }
  //   }
  // });
};
//检查收费管理节点信息是否完善
const checkPlanList = () => {
  if (!planList.value || planList.value.length <= 0) {
    return { flag: true, planList: [] };
  }
  let isAllow = true;
  planList.value.map(item => {
    if (
      item.businessNode === "" ||
      item.businessNode === null ||
      item.collectionNode === "" ||
      item.collectionNode === null ||
      item.collectionCycle === "" ||
      item.collectionCycle === null ||
      item.collectionScale === "" ||
      item.collectionScale === null
    ) {
      isAllow = false;
    }
  });
  if (!isAllow) {
    ElNotification({
      title: "提示",
      message: "请完善收款关联节点信息！",
      type: "error",
      duration: 1500
    });
    return { flag: false, planList: [] };
  }

  let amountTotal = 0;
  const arr = planList.value.map((item, index) => {
    amountTotal = amountTotal + Number(item.collectionScale);
    return {
      collectionType: index + 1,
      businessNode: item.businessNode,
      collectionScale: item.collectionScale,
      collectionNode: item.collectionNode,
      collectionCycle: item.collectionCycle
    };
  });
  if (amountTotal < 100 || amountTotal > 100) {
    ElNotification({
      title: "提示",
      message: "付款比例总和必须等于100%！",
      type: "error",
      duration: 1500
    });
    return { flag: false, planList: [] };
  }

  return { flag: true, planList: arr };
};
// 修改状态
const editStatus = item => {
  disable(item.tenantId, item.status).then(() => {
    init();
    proxy.$modal.msgSuccess("操作成功！");
  });
};
// 续费
const toRenewal = () => {
  proxy.$refs.renewalRef.validate(valid => {
    // 此处调用续费接口
    if (valid) {
      if (isNew.value) {
        // 如果是新增租户
        const year = renewalForm.value.sginMonth / 12;
        const month = renewalForm.value.sginMonth % 12;
        let currentDate = new Date();
        if (year) currentDate.setFullYear(currentDate.getFullYear() + year);
        currentDate.setMonth(currentDate.getMonth() + month);
        const createTime = formatDate(new Date(), "YY-MM-DD");
        const cutoffTime = formatDate(currentDate, "YY-MM-DD");
        renewList.value.push({
          ...renewalForm.value,
          createTime,
          cutoffTime,
          createBy: "若依",
          account: tenantForm.value.account
        });
        dialogVisible.value = false;
      } else {
        renewal(renewalForm.value.tenantId, renewalForm.value).then(res => {
          getRenewalList();
          proxy.$modal.msgSuccess("操作成功！");
          dialogVisible.value = false;
        });
      }
    }
  });
};

const reset = () => {
  proxy.$refs.queryRef.resetFields();
  init();
};
const getCategoryTreeData = async () => {
  const res = await getCategoryTree();
  options.value = res.data;
};
const getAreaList = () => {
  getArea().then(res => {
    area.value = res.data;
  });
};

// 商家等级选择列表查询
const selectLevelList = () => {
  selectList().then(res => {
    businessLevelIdOption.value = res.data;
  });
};

// 不可选小于当前日期
const disabledDate = val => {
  return val.getTime() < new Date().getTime() - 8.64e7;
};

/**
 * 租户标识
 */
const tenantMarkList = ref([]);

onMounted(() => {
  init();
  getAreaList();
  getCategoryTreeData();
  selectLevelList();
});
</script>
<style>
.newAddress .el-input__wrapper {
  flex-grow: 0;
}
</style>
<style lang="scss" scoped>
.plan-wrap {
  p {
    margin: 0;
    padding: 0;
  }

  .list {
    max-height: 400px;
    overflow-y: auto;
    .list-item {
      border: 1px solid #f0f0f0;
      // margin-top: 20px;
      header {
        font-size: 12px;
        line-height: 26px;
        background-color: #f0f0f0;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img:hover {
          cursor: pointer;
        }
      }
      .options-warp {
        display: grid;
        gap: 6px;
        grid-template-columns: 1fr;
        padding: 6px 6px;
        font-size: 12px;
        & > div {
          display: grid;
          &:first-of-type {
            grid-template-columns: 94px 110px 1fr;
          }
          p.label {
            text-align: right;
            margin-right: 4px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            color: #4e5969;
            i {
              font-style: normal;
              display: inline-block;
              padding: 4px 4px 0 0;
            }
          }
        }

        & > div:nth-of-type(2) > div {
          display: grid;
          grid-template-columns: 94px 1fr;
        }
      }
    }
  }
}
.drawer-aside {
  width: auto;
  background-color: #fff;
  // border-right: 1px solid #e1e6ed;
  padding: 0;
  padding-top: 20px;
}
.spase {
  height: 100%;
  .title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 30px;
  }

  .content {
    width: 100%;
    // height: 85vh;
    background: #f4f6f8;
    overflow-y: scroll;
    flex: 1;

    > img {
      width: 120px;
      height: 170px;
      margin: 200px auto 0;
      display: block;
    }

    .record-item {
      width: 95%;
      margin: 10px auto;
      height: 180px;
      border-radius: 10px;
      background: white;
      padding: 10px 0;

      .date {
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        border-bottom: 1px solid #f7f7f7;
        padding-left: 20px;

        i {
          display: inline-block;
          margin-right: 6px;
        }
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;

        > div {
          height: 60px;
          text-align: center;
          font-size: 13px;
          color: #86909c;
          line-height: 30px;

          div {
            color: black;
          }
        }
      }
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  ::v-deep(.hidden-controls) {
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none; /* 隐藏增加和减少按钮 */
    }
    .el-input__wrapper {
      padding: 0 10px;
    }
  }
}

.tenant-identification {
  :deep(.el-checkbox) {
    width: 100%;
    padding-left: 8px;
    box-sizing: border-box;
    margin-right: 0 !important;
    & + .el-checkbox {
      margin-top: 4px;
    }
    &:hover {
      background-color: #f2f3ff;
    }
  }
  :deep(.is-checked) {
    background-color: #f2f3ff;
  }
}

.dialog-footer {
  margin: 0 auto;
  width: 350px;
  display: flex;
  justify-content: center;
  &.footer-fixed {
    position: fixed;
    bottom: 28px;
    background-color: white;
    .btn {
      width: 120px;
      height: 36px;
      line-height: 36px;
    }
  }

  .classify-list {
    width: 100%;
    border: 1px solid #e6e8eb;
    border-top: none;
    padding: 10px;

    .classify-item {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
<style lang="scss">
.tenant-dialog {
  position: absolute !important;
  left: unset !important;
  right: 200px;
  top: calc(50vh - 200px);
  margin: 0 !important;
}

.drawer {
  .el-drawer__header {
    margin-bottom: 0;
  }
}
</style>
